<template>
	<view class="register-container">
		<h1>注册界面</h1>
		<view class="input-group">
			<input v-model="registerForm.usernameWbxqy" placeholder="请输入用户名" clearable></input>
		</view>
		<view class="input-group">
			<input v-model="registerForm.passwordWbxqy" type="password" placeholder="请输入密码" clearable></input>
		</view>
		<view class="input-group">
			<input v-model="registerForm.emailWbxqy" placeholder="请输入邮箱（可选）" clearable></input>
		</view>
		<view class="input-group">
			<input v-model="registerForm.phoneNumberWbxqy" placeholder="请输入电话号码" clearable></input>
			<button @click="sendVerificationCode">获取验证码</button>
		</view>
		<view class="input-group">
			<input v-model="verificationCode" placeholder="请输入验证码" clearable></input>
		</view>
		<view class="action-group" style="margin-top: 10px;">
			<button @click="handleRegister">注册</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		register
	} from "../api/userMG.js";

	const registerForm = reactive({
		usernameWbxqy: '',
		passwordWbxqy: '',
		emailWbxqy: '',
        phoneNumberWbxqy: '',
		roleWbxqy: 'U',
        avatarUrlWbxqy: '', // 可以在实际应用中提供上传功能
    });

	const verificationCode = ref('');

	const handleRegister = async () => {
        if (!validateEmail(registerForm.emailWbxqy)) {
            uni.showToast({
                title: "邮箱格式不正确",
                icon: "none"
            });
            return;
        }
        if (!validatePhone(registerForm.phoneNumberWbxqy)) {
            uni.showToast({
                title: "电话格式不正确",
                icon: "none"
            });
            return;
        }

        try {
			console.log('注册信息', registerForm.value);
			const res = await register(registerForm);

            if (res === true) {
                uni.showToast({
                    title: "注册成功，去登录",
                    icon: "success"
                });
                uni.redirectTo({
                    url: '/pages/common/login'
                });
            } else {
                uni.showToast({
                    title: "该用户已经注册",
                    icon: "none"
                });
            }
			
        } catch (error) {
            console.error('注册出错', error);
            uni.showToast({
                title: "注册出错，请稍后再试",
                icon: "none"
            });
        }
    };

    const sendVerificationCode = () => {
        try {
			const code = Math.floor(100000 + Math.random() * 900000).toString();
			verificationCode.value = code;

			uni.setClipboardData({
				data: code,
				success() {
					uni.showToast({
						title: "验证码已复制",
						icon: "success"
					});
				},
				fail(err) {
					console.error('复制验证码失败', err);
					uni.showToast({
						title: "复制验证码失败",
						icon: "none"
					});
				},
			});
			
        } catch (error) {
            console.error('发送验证码出错', error);
        }
    };

    const validateEmail = (email) => {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    };

    const validatePhone = (phone) => {
        const re = /^1[3-9]\d{9}$/; // 简单的中国手机号码正则验证
        return re.test(phone);
    };
</script>

<style>
.register-container {
	padding: 20px;
}

.input-group {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}

.input-group input {
	flex: 1;
	margin-right: 10px;
}

.action-group {
	margin-bottom: 20px;
}

.link-group {
	text-align: center;
}
</style>
